<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
  <title>js-fireworks - JavaScript Fireworks - A Chrome Experiment</title>

  <!-- If Chrome Frame is enabled, let's use it! -->
  <meta http-equiv="X-UA-Compatible" content="chrome=1" />

  <meta name="Description" content="A Chrome Experiment to show Fireworks over London entirely in JavaScript using the Canvas tag.  A good test of browser performance when handling a large number of items." />

  <!-- Load jQuery -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

  <!-- jQuery UI is only used for the nice slider controls -->
  <link type="text/css" href="../ui/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="../ui/jquery-ui.js"></script>
  <script type="text/javascript" src="../ui/ui.slider.js"></script>

  <!-- Load the fireworks script and stylesheet -->
  <script type="text/javascript" src="twitter/fireworks.js"></script>
  <link type="text/css" href="twitter/fireworks.css" rel="stylesheet" />


</head>
<body>

  <h1>JavaScript Fireworks</h1>
  <script type="text/javascript">
    // we need a full screen canvas, but the canvas tag doesn't support percentage widths
    // so we simply write out the canvas tag using javascript
    document.write('<div style="background:url(images/background.jpg) repeat-x;position:absolute;left:0;top:'+($(window).height()-193)+'px;width:100%;height:200px;"></div>');
    document.write('<canvas id="cv" width="'+$(window).width()+'" height="'+($(window).height()-100)+'" style="position:absolute;left:0;top:0;"></canvas>');
    // obviously, this become wrong if the browser window changes size
    // so we simply reload the page on resize
  </script>

  <div id="author">
  </div>

  <div id="message">
    "twitter" AND "awesome"<br/>
    github.com/kennethkufluk/js-fireworks<br/>
    Number of items on the screen:  <div id="fireCount">0</div>
  </div>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-6696309-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</body>
</html>